import React, { useRef } from 'react';
import styles from './index.less';
import classNames from 'classnames';

interface Props {
  placeholder?: string;
  defaultValue?: string;
  onSearch?: (value) => void;
}
const Index: React.FC<Props> = ({
  placeholder = '搜索感兴趣的教程',
  onSearch,
  defaultValue = '',
}) => {
  const valueRef = useRef(defaultValue);
  const handleSearch = () => {
    onSearch?.(valueRef.current);
  };

  const handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      handleSearch();
    }
  };
  return (
    <div className={classNames(styles.search, 'cgjoy-search')}>
      <input
        className={styles.input}
        defaultValue={defaultValue}
        type="text"
        placeholder={placeholder}
        onChange={(e) => (valueRef.current = e.target.value)}
        onKeyDown={handleKeyDown}
      />
      <img
        loading="lazy"
        className={styles.icon}
        src={require('@/assets/pc/images/icon-search.png')}
        onClick={handleSearch}
      />
    </div>
  );
};

export default Index;
